<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import logo from '@/assets/icon/public/logo_full.png'
import M from '@/assets/icon/public/M.png'
import { getOptions } from '@/views/mining/js/chartOptions'
import ApexCharts from 'apexcharts'
const imgs = ref([logo, M])
const imgs1 = ref([logo])
const show = ref(false)
const actions = ref([
  {
    name: '60%X+40%MTC',
    icons: [logo, M],
    value: 1
  },
  {
    name: '60%X+40%MTC',
    icons: [logo],
    value: 2
  }
])
const checked = ref(1)

const tabs = ref([
  {
    label: 'D',
    value: ''
  },
  {
    label: 'W',
    value: ''
  },
  {
    label: 'M',
    value: ''
  },
  {
    label: 'Y',
    value: ''
  }
])

const radioChange = (val) => {
  // console.log(val);
  show.value = false
  if (checked.value == val) return
  checked.value = val

}
const openSelect = () => {
  show.value = true
}
const tabIndex = ref(0)
const tabsChange = (index) => {
  if (tabIndex.value == index) return
  tabIndex.value = index
}

const initApex = () => {
  let options = getOptions(
    [31, 140, 88, 281, 88, 281],
    ['00:00', '01:00', '02:00', '03:00', '02:00', '03:00']
  )
  let chart = new ApexCharts(document.querySelector('#chart'), options)
  chart.render()
}

onMounted(() => {
  initApex()
})
</script>
<template>
  <div class="container px-24 py-30">
    <div class="flex items-center gap-56px">
      <div class="flex items-center">
        <img src="/src/assets/icon/public/3J.png" class="w-24 h-24" />
        <div class="text-[#FFFFFF] text-[24px] font-pingfang font-400 line-height-20px ml-8">
          1WMTC=0.2U
        </div>
      </div>
      <div class="flex items-center">
        <img src="/src/assets/icon/public/J.png" class="w-24 h-24" />
        <div class="text-[#FFFFFF] text-[24px] font-pingfang font-400 line-height-20px ml-8">
          1X=0.2U
        </div>
      </div>
      <div class="flex items-center">
        <img src="/src/assets/icon/public/M.png" class="w-24 h-24" />
        <div class="text-[#FFFFFF] text-[24px] font-pingfang font-400 line-height-20px ml-8">
          1MTC=0.2U
        </div>
      </div>
    </div>
    <div class="pt-26px pb-56px px-30px rounded-[30px] bg-[#282828] w-100% mt-34px">
      <div class="flex items-center justify-between">
        <div
          class="bg-[#F76938] rounded-[555px] py-10 px-40 text-[26px] text-[#fff] font-roboto font-700 line-height-30px">
          Type 1
        </div>
      </div>
      <div class="flex items-center justify-between mt-30px">
        <div class="flex flex-col items-center">
          <div class="flex items-center">
            <img src="/src/assets/icon/mining/coin.png" class="w-36 h-36" />
            <div class="text-[#FFFFFF] text-[30px] font-roboto font-800 line-height-28px ml-4px">
              300
            </div>
          </div>
          <div class="text-[#AEB8B7] text-[24px] font-pingfang font-400 line-height-42px mt-10px">
            价格/U
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="flex items-center">
            <img src="/src/assets/icon/mining/electricity.png" class="w-36 h-36" />
            <div class="text-[#FFFFFF] text-[30px] font-roboto font-800 line-height-28px ml-4px">
              1.5
            </div>
          </div>
          <div class="text-[#AEB8B7] text-[24px] font-pingfang font-400 line-height-42px mt-10px">
            算力/倍
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="flex items-center">
            <img src="/src/assets/icon/mining/trophy.png" class="w-36 h-36" />
            <div class="text-[#FFFFFF] text-[30px] font-roboto font-800 line-height-28px ml-4px">
              300
            </div>
          </div>
          <div class="text-[#AEB8B7] text-[24px] font-pingfang font-400 line-height-42px mt-10px">
            周期/天
          </div>
        </div>
      </div>
      <div class="bg-[#000000] rounded-[32px] p-26 mt-36px">
        <div class="flex">
          <div
            class="flex items-center px-20 py-12 rounded-[555px] border-solid border-[#fff]/30 wMax-100% van-ellipsis"
            @click="openSelect">
            <div class="flex items-center">
              <div :class="[index == 0 ? '' : 'ml-[-17px]']" v-for="(img, index) in imgs" :key="index">
                <img :src="img" class="w-44 h-44" />
              </div>
              <div class="text-[#FFFFFF] text-[28px] font-700 font-roboto ml-12px">60%X+40%MTC</div>
              <div class="flex items-center ml-28">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 28 28" fill="none">
                  <path
                    d="M14 18.9583C13.5917 18.9583 13.1833 18.8416 12.8917 18.5499L5.30833 12.1333C4.55 11.4916 4.49166 10.3833 5.075 9.68325C5.71666 8.92492 6.825 8.86658 7.525 9.44992L14 14.9333L20.475 9.44992C21.2333 8.80825 22.3417 8.92492 22.925 9.68325C23.5667 10.4416 23.45 11.5499 22.6917 12.1333L15.1083 18.5499C14.8167 18.8416 14.4083 18.9583 14 18.9583Z"
                    fill="white" />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-between mt-22px">
          <div class="">
            <span class="text-[#FFFFFF] text-[44px] font-900 font-roboto">0.00</span>
            <span class="text-[#FFFFFF] text-[22px] font-900 font-roboto ml-8">USDT</span>
          </div>
          <div class="bg-[#F76938] py-10 px-20 rounded-[10px] text-[#FFFFFF] text-[24px] font-400 font-roboto">
            MAX
          </div>
        </div>
        <div class="flex flex-col gap-24px mt-36px">
          <div
            class="flex items-center justify-between w-100% text-[#fff]/60 text-[24px] font-pingfang font-400 line-height-32px">
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 13 13" fill="none">
                <circle cx="6.86377" cy="6.81348" r="6" fill="#F76938" />
              </svg>
              <div class="ml-8px">支付金额：</div>
            </div>
            <div>1000 X+1000MTC</div>
          </div>
          <div
            class="flex items-center justify-between w-100% text-[#fff]/60 text-[24px] font-pingfang font-400 line-height-32px">
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 13 13" fill="none">
                <circle cx="6.86377" cy="6.81348" r="6" fill="#F76938" />
              </svg>
              <div class="ml-8px">预计算力：</div>
            </div>
            <div>1000T</div>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-center mt-16px">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 60 60" fill="none">
          <path
            d="M30 3.78931C38.6877 3.90825 45.8812 5.41704 50.1715 9.82857C54.583 14.1188 56.0918 21.3124 56.2107 30.0001C56.0918 38.6877 54.583 45.8813 50.1715 50.1715C45.8812 54.5831 38.6877 56.0918 30 56.2108C21.3123 56.0918 14.1187 54.5831 9.82851 50.1715C5.41699 45.8813 3.9082 38.6877 3.78926 30C3.9082 21.3124 5.41699 14.1188 9.82851 9.82857C14.1187 5.41704 21.3123 3.90825 30 3.78931Z"
            fill="black" />
          <path
            d="M40.1924 28.9084L31.5439 37.5568L31.5434 18.7154C31.5434 17.8623 30.852 17.1709 29.9988 17.1709C29.1457 17.1709 28.4543 17.8617 28.4543 18.7154L28.4549 37.5568L19.807 28.9078C19.2041 28.3049 18.2262 28.3049 17.6227 28.9078C17.0197 29.5107 17.0197 30.4887 17.6227 31.0922L28.9078 42.3773C28.9793 42.4488 29.059 42.5133 29.1434 42.5695C29.1814 42.5947 29.2225 42.6123 29.2623 42.634C29.3109 42.6609 29.3578 42.6902 29.4094 42.7113C29.4609 42.733 29.5154 42.7453 29.5688 42.7606C29.6115 42.7729 29.6531 42.7898 29.6971 42.7986C29.8969 42.8385 30.1031 42.8385 30.3029 42.7986C30.3445 42.7904 30.3832 42.7746 30.4242 42.7629C30.4799 42.7471 30.5367 42.7336 30.5912 42.7113C30.641 42.6908 30.6855 42.6621 30.7324 42.6369C30.774 42.6147 30.8168 42.5959 30.8566 42.5695C30.941 42.5127 31.0201 42.4488 31.0922 42.3773L42.3768 31.0922C42.9797 30.4893 42.9797 29.5113 42.3768 28.9078C41.7738 28.3049 40.7959 28.3049 40.1924 28.9084Z"
            fill="white" />
        </svg>
      </div>
      <div class="bg-[#000000] rounded-[32px] p-26 mt-16px">
        <div class="flex">
          <div class="flex items-center px-20 py-12 rounded-[555px] border-solid border-[#fff]/30">
            <div class="flex items-center">
              <div :class="[index == 0 ? '' : 'ml-[-17px]']" v-for="(img, index) in imgs1" :key="index">
                <img :src="img" class="w-44 h-44" />
              </div>
              <div class="text-[#FFFFFF] text-[28px] font-700 font-roboto ml-12px mr-20px">X</div>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-between mt-24px">
          <div class="text-[#F76938] text-[44px] font-900 font-roboto">0.00</div>
          <div class="text-[#AEB8B7] text-[22px] font-400 font-pingfang">预计收益</div>
        </div>
      </div>
      <div
        class="h-90px rounded-[14px] bg-[#F76938] text-[#fff] text-[32px] text-center line-height-90px font-HarmonyOS font-700 van-haptics-feedback mt-26px">
        立即入金
      </div>
      <div class="flex items-center gap-24px mt-36px">
        <div class="px-34px py-24px bg-[#13131C] rounded-[14px] w-50% flex items-center">
          <div class="flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="none">
              <path
                d="M29.0679 13.3333C29.6768 16.3217 29.2428 19.4286 27.8383 22.1357C26.4338 24.8429 24.1437 26.9867 21.3499 28.2097C18.556 29.4328 15.4274 29.661 12.4856 28.8565C9.54382 28.0519 6.96678 26.2632 5.18423 23.7885C3.40167 21.3139 2.52135 18.303 2.69008 15.2578C2.8588 12.2127 4.06636 9.31744 6.11139 7.05488C8.15642 4.79232 10.9153 3.29923 13.9279 2.82459C16.9406 2.34995 20.0249 2.92247 22.6665 4.44665"
                stroke="#65DE1E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M12 14.6663L16 18.6663L29.3333 5.33301" stroke="#65DE1E" stroke-width="2.66667"
                stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <div class="ml-16">
            <div class="text-[#fff] text-26px font-700 font-roboto line-height-40px">
              10000.0000
            </div>
            <div class="text-[#fff]/70 text-22px font-400 font-roboto line-height-40px">
              当前收益
            </div>
          </div>
        </div>
        <div class="px-34px py-24px bg-[#13131C] rounded-[14px] w-50% flex items-center">
          <div class="flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="none">
              <path
                d="M29.0679 13.3333C29.6768 16.3217 29.2428 19.4286 27.8383 22.1357C26.4338 24.8429 24.1437 26.9867 21.3499 28.2097C18.556 29.4328 15.4274 29.661 12.4856 28.8565C9.54382 28.0519 6.96678 26.2632 5.18423 23.7885C3.40167 21.3139 2.52135 18.303 2.69008 15.2578C2.8588 12.2127 4.06636 9.31744 6.11139 7.05488C8.15642 4.79232 10.9153 3.29923 13.9279 2.82459C16.9406 2.34995 20.0249 2.92247 22.6665 4.44665"
                stroke="#65DE1E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M12 14.6663L16 18.6663L29.3333 5.33301" stroke="#65DE1E" stroke-width="2.66667"
                stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <div class="ml-16">
            <div class="text-[#fff] text-26px font-700 font-roboto line-height-40px">
              10000.0000
            </div>
            <div class="text-[#fff]/70 text-22px font-400 font-roboto line-height-40px">
              累计收益
            </div>
          </div>
        </div>
      </div>
      <div class="flex items-center gap-24px mt-16px">
        <div class="px-34px py-24px bg-[#13131C] rounded-[14px] w-50% flex items-center">
          <div class="flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="none">
              <path
                d="M29.0679 13.3333C29.6768 16.3217 29.2428 19.4286 27.8383 22.1357C26.4338 24.8429 24.1437 26.9867 21.3499 28.2097C18.556 29.4328 15.4274 29.661 12.4856 28.8565C9.54382 28.0519 6.96678 26.2632 5.18423 23.7885C3.40167 21.3139 2.52135 18.303 2.69008 15.2578C2.8588 12.2127 4.06636 9.31744 6.11139 7.05488C8.15642 4.79232 10.9153 3.29923 13.9279 2.82459C16.9406 2.34995 20.0249 2.92247 22.6665 4.44665"
                stroke="#65DE1E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M12 14.6663L16 18.6663L29.3333 5.33301" stroke="#65DE1E" stroke-width="2.66667"
                stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <div class="ml-16">
            <div class="text-[#fff] text-26px font-700 font-roboto line-height-40px">
              10000.0000
            </div>
            <div class="text-[#fff]/70 text-22px font-400 font-roboto line-height-40px">待释放</div>
          </div>
        </div>
        <div class="px-34px py-24px bg-[#13131C] rounded-[14px] w-50% flex items-center">
          <div class="flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="none">
              <path
                d="M29.0679 13.3333C29.6768 16.3217 29.2428 19.4286 27.8383 22.1357C26.4338 24.8429 24.1437 26.9867 21.3499 28.2097C18.556 29.4328 15.4274 29.661 12.4856 28.8565C9.54382 28.0519 6.96678 26.2632 5.18423 23.7885C3.40167 21.3139 2.52135 18.303 2.69008 15.2578C2.8588 12.2127 4.06636 9.31744 6.11139 7.05488C8.15642 4.79232 10.9153 3.29923 13.9279 2.82459C16.9406 2.34995 20.0249 2.92247 22.6665 4.44665"
                stroke="#65DE1E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M12 14.6663L16 18.6663L29.3333 5.33301" stroke="#65DE1E" stroke-width="2.66667"
                stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <div class="ml-16">
            <div class="text-[#fff] text-26px font-700 font-roboto line-height-40px">
              10000.0000
            </div>
            <div class="text-[#fff]/70 text-22px font-400 font-roboto line-height-40px">已释放</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-[#282828] p-32 rounded-[30px] mt-44px">
      <div class="flex items-center justify-between">
        <div class="text-[#fff] text-30px font-700 font-roboto line-height-32px">交易额</div>
        <div class="flex items-center bg-[#000] rounded-[999px]">
          <div :class="[
            'px-42 py-10 rounded-[9999px] flex items-center justify-center text-[24px] font-roboto font-500 line-height-32px',
            tabIndex == index ? 'bg-[#F76938] text-[#000]' : ''
          ]" v-for="(tab, index) in tabs" :key="index" @click="() => tabsChange(index)">
            {{ tab.label }}
          </div>
        </div>
      </div>
      <div class="mt-36px text-[#fff] text-[36px] font-roboto font-800">$27.59M</div>
      <div class="text-[#fff]/50 text-24px font-400 font-roboto mt-14px">
        Oct5,2025-0ct 6.2025 (UTC)
      </div>
      <div class="mt-64px">
        <div class="w-100% h-540" id="chart"></div>
      </div>
    </div>
    <van-popup v-model:show="show" round>
      <van-radio-group v-model="checked" checked-color="#65DE1E" @change="radioChange">
        <div class="flex flex-col gap-28px bg-[#fff] px-24 py-50 popup">
          <div
            class="w-564 border-[#0000004D] border-[1px] border-solid px-18 py-12 rounded-[555px] flex items-center justify-between"
            v-for="(action, index) in actions" :key="index" @click.stop="() => radioChange(action.value)">
            <div class="flex items-center">
              <div class="flex items-center">
                <div :class="[index1 == 0 ? '' : 'ml-[-17px]']" v-for="(img, index1) in action.icons" :key="index1">
                  <img :src="img" class="w-44 h-44" />
                </div>
              </div>
              <div class="text-[#000] text-28px font-700 font-roboto ml-12">60%X+40%MTC</div>
            </div>
            <div>
              <van-radio :name="action.value" @click.stop="() => { }"></van-radio>
            </div>
          </div>
        </div>
      </van-radio-group>
    </van-popup>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background: #0F0F25;
}

.popup {
  max-height: 50vh;
  overflow-y: scroll;
}
</style>
